<template>
  <div class="cinemas">
    <div class="container">
      <div class="filter-bar">
        <div class="filter-item">
          <span class="label">区域：</span>
          <el-radio-group v-model="filters.area" size="small">
            <el-radio-button label="all">全部</el-radio-button>
            <el-radio-button label="area1">汉台区</el-radio-button>
            <el-radio-button label="area2">南郑区</el-radio-button>
            <el-radio-button label="area3">城固县</el-radio-button>
            <el-radio-button label="area4">勉县</el-radio-button>
          </el-radio-group>
        </div>
        <div class="filter-item">
          <span class="label">特色：</span>
          <el-radio-group v-model="filters.feature" size="small">
            <el-radio-button label="all">全部</el-radio-button>
            <el-radio-button label="imax">IMAX厅</el-radio-button>
            <el-radio-button label="dolby">杜比影院</el-radio-button>
            <el-radio-button label="child">亲子厅</el-radio-button>
          </el-radio-group>
        </div>
        <div class="filter-item">
          <span class="label">服务：</span>
          <el-radio-group v-model="filters.service" size="small">
            <el-radio-button label="all">全部</el-radio-button>
            <el-radio-button label="snack">小吃</el-radio-button>
            <el-radio-button label="vip">VIP厅</el-radio-button>
            <el-radio-button label="parking">停车场</el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <div class="cinema-list">
        <el-card v-for="cinema in cinemas" :key="cinema.id" class="cinema-card">
          <div class="cinema-info">
            <div class="cinema-main">
              <h3 class="cinema-name">{{ cinema.name }}</h3>
              <p class="cinema-address">{{ cinema.address }}</p>
            </div>
            <div class="cinema-side">
              <div class="price">
                <span class="price-number">¥{{ cinema.price }}</span>
                <span class="price-text">起</span>
              </div>
              <el-button type="primary" size="small" @click="goToCinema(cinema.id)">选座购票</el-button>
            </div>
          </div>
          <div class="cinema-tags">
            <el-tag size="mini" v-for="tag in cinema.tags" :key="tag" type="info">{{ tag }}</el-tag>
          </div>
          <div class="recent-movies" v-if="cinema.movies && cinema.movies.length">
            <div class="movie-item" v-for="movie in cinema.movies" :key="movie.id">
              <img :src="movie.poster" :alt="movie.title">
              <p class="movie-title">{{ movie.title }}</p>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Cinemas',
  data() {
    return {
      filters: {
        area: 'all',
        feature: 'all',
        service: 'all'
      },
      cinemas: [
        {
          id: 1,
          name: '万达影城（汉台店）',
          address: '汉中市广渠路66号首东国际大厦1层',
          price: 38,
          tags: ['改签', '小吃', '4D厅', '杜比全景声'],
          movies: [
            {
              id: 1,
              title: '电影1',
              poster: require('@/assets/images/流浪地球2.webp'),
            },
            {
              id: 2,
              title: '电影2',
              poster: require('@/assets/images/长安三万里.webp'),
            }
          ]
        },
        {
          id: 2,
          name: 'CGV影城（清河店）',
          address: '南郑区清河中街68号五彩城购物中心东区7层',
          price: 43,
          tags: ['退票', 'IMAX厅', '停车场', 'VIP厅'],
          movies: [
            {
              id: 1,
              title: '电影1',
              poster: require('@/assets/images/满江红.webp'),
            },
            {
              id: 2,
              title: '电影2',
              poster: require('@/assets/images/消失的她.webp'),
            }
          ]
        }
      ]
    }
  },
  methods: {
    goToCinema(id) {
      this.$router.push(`/cinema/${id}`)
    }
  }
}
</script>

<style scoped>
.filter-bar {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
}

.filter-item {
  margin-bottom: 15px;
}

.filter-item:last-child {
  margin-bottom: 0;
}

.label {
  color: #666;
  margin-right: 10px;
}

.cinema-card {
  margin-bottom: 20px;
}

.cinema-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.cinema-main {
  flex: 1;
  padding-right: 20px;
}

.cinema-name {
  font-size: 16px;
  color: #333;
  margin: 0 0 8px 0;
}

.cinema-address {
  color: #666;
  font-size: 13px;
  margin: 0;
}

.cinema-side {
  text-align: right;
}

.price {
  margin-bottom: 10px;
}

.price-number {
  color: #2b86c5;
  font-size: 18px;
  font-weight: bold;
}

.price-text {
  color: #999;
  font-size: 12px;
  margin-left: 2px;
}

.cinema-tags {
  margin-bottom: 15px;
}

.cinema-tags .el-tag {
  margin-right: 8px;
}

.recent-movies {
  display: flex;
  overflow-x: auto;
  padding-bottom: 10px;
}

.movie-item {
  flex: 0 0 auto;
  width: 100px;
  margin-right: 15px;
  text-align: center;
}

.movie-item:last-child {
  margin-right: 0;
}

.movie-item img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 4px;
}

.movie-title {
  margin: 8px 0 0 0;
  font-size: 12px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style> 